<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
	   <meta name="renderer" content="webkit">
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	   <link href="styles/homePage.css" rel="stylesheet" type="text/css">
	   <link href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="ditu_Chart" style="height: 100%"></div>
	   <div id="guojia_Chart"></div>
	   <div id="china_Chart"></div>		   
	   </div>
	   <table class="table table-hover" id="city_table">
	       <thead>
			   <tr>
				   <th style="font-size: 8;">Name</th>
				   <th>Confirm</th>
				   <th>Dead</th>
				   <th>Cure</th>
				   <th>Suspect</th>
			   </tr>
	       </thead>
		   <tbody></tbody>
	   </table>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=P1fZ2UxTsYWeib4so7Gj3GG0onoclyNA&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript" src="scripts/data_renshu.js"></script>
       <script type="text/javascript" src="scripts/read_data.js"></script>
	   <script type="text/javascript" src="scripts/ditu.js"></script>
	   <script type="text/javascript" src="scripts/jquery.min.js"></script>
	   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
	   
		
		<script type="text/javascript">
		var ditu_Chart = echarts.init(document.getElementById("ditu_Chart"));
		var china_Chart = echarts.init(document.getElementById("china_Chart"));
		china_Chart.setOption(option_china, true);
		ditu_Chart.setOption(option_ditu, true);
		
		
		var data_gesheng = [{"name": "湖北", "cofirm":1784, "dead":100, "cure":100, "suspect":100},{"name": "江苏", "confirm":100, "dead":1, "cure":10, "suspect":10}];
		window.onload = function () {
			var tdArr = document.getElementById('city_table').children[1];//getElementsByTagName("tbody");
			for (var i = 0; i < data_gesheng.length; i++) {
				var tr = document.createElement("tr");
				tr.innerHTML = '</td><td class="active">'+data_gesheng[i].name ;
				tr.innerHTML += '</td><td class="active">'+ data_gesheng[i].confirm; 
				tr.innerHTML += '</td><td class="active">'+data_gesheng[i].dead;
				tr.innerHTML += '</td><td class="active">'+data_gesheng[i].cure;
				tr.innerHTML += '</td><td class="active">'+data_gesheng[i].suspect+'</td>';
				tdArr.appendChild(tr)
			}
			$(document).ready(function() {
			      $('#city_table').DataTable({
					  "dom": '<"top"i>rt<"clear"flp>'
				  });
			 });
		};
		
       </script>
   </body>
</html>